<style lang="less" scoped>
  .s2fmc{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 80% 50%;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
    .no-data{
      color: #fff;
      width: 100%;
      font-size: 14px;
      height: calc(100% - 45px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

<template>
  <div class="s2fmc">
    <div class="s2fmc_title">
      <span>{{ S2FMCTitle }}</span>
    </div>
    <medical-charts v-if="timeLine.length > 0" :chart-id="chartId" :legend-title="legendTitle" :time-line="timeLine" :chart-data="chartData" :left-y="leftY" :right-y="rightY" class="s2fmc_content" />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import medicalCharts from './medicalCharts'
import { getS2FMCRatio, getStrokeNGSNeedleRatio } from '@/api/comprehensive/S2FMC'
export default {
  components: {
    medicalCharts
  },
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      chartId: 's2fmc',
      S2FMCTitle: '1、STEMI患者发病后2小时内就诊的比例',
      legendTitle: ['平均值', '达标率'],
      leftY: '分钟',
      rightY: '%',
      timeLine: [],
      chartData: [],
      setInter: null
    }
  },
  watch: {
    'isStrock'() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      // this.timeLine = []
      // this.chartData = []
      if (this.isStrock == 'chestPain') {
        this.S2FMCTitle = '1、STEMI患者发病后2小时内就诊的比例'
        this.legendTitle = ['比例']
        this.leftY = '%'
        this.rightY = ''
        getS2FMCRatio({ hospitalId: this.$store.getters.hospitalId }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              let averageData = []
              let rateData = []
              let timeLine = []
              res.data.forEach(el => {
                timeLine.push(el.timeName)
                averageData.push(el.quotaAvg)
                rateData.push(el.reachRatio)
              })
              this.timeLine = timeLine
              this.chartData = [
                {
                  name: '达标率',
                  type: 'bar',
                  label: {
                    show: true,
                    position: 'top'
                  },
                  barWidth: 20,
                  data: rateData
                }
              ]
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        let quotaData = []
        this.S2FMCTitle = '急性脑梗死静脉溶栓率'
        this.legendTitle = ['比率']
        this.leftY = '比率'
        this.rightY = ''
        getStrokeNGSNeedleRatio({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              let timeLine = []
              res.data.forEach(el => {
                timeLine.push(el.timeName)
                quotaData.push(el.quotaRatio)
              })
              this.timeLine = timeLine
              this.chartData = [
                {
                  name: '比率',
                  type: 'bar',
                  label: {
                    show: true,
                    position: 'top'
                  },
                  barWidth: 20,
                  data: quotaData
                }
              ]
            }
          }
        })
      }
    }
  }
}
</script>
